<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">我的钱包</div>
                <div class="fls"></div>
            </div>
        </van-sticky>
        <div class="c_iboade">
            <div class="mannys_big">{{Mywallet}}</div>
            <div class="mannys_miao">钱包余额(元)</div>
        </div>
        <div class="kabao" @click="AccountDetails()">
            <div class="zuobian">
                <img src="../../../static/images/icon-qb-zhmx.png" alt="">
                <div class="tit">账户明细</div>
            </div>
            <div class="youbian">
                <img src="../../../static/images/icon-arrow-black.png" alt="">
            </div>
        </div>
        <div class="kabao" @click="balanceOfwithdrawal()">
            <div class="zuobian">
                <img src="../../../static/images/icon-qb-yetx.png" alt="">
                <div class="tit">余额提现</div>
            </div>
            <div class="youbian">
                <img src="../../../static/images/icon-arrow-black.png" alt="">
            </div>
        </div>
        <div class="kabao" @click="bank_administration()">
            <div class="zuobian">
                <img src="../../../static/images/icon-qb-yhkgl.png" alt="">
                <div class="tit">银行卡管理</div>
            </div>
            <div class="youbian">
                <img src="../../../static/images/icon-arrow-black.png" alt="">
            </div>
        </div>
        
    </div>
</template>

<script>
import Vue from 'vue'
import api from '../../api/PublicInterface'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            Mywallet:'', //账户余额
        }
    },
    mounted(){
        this.balance();   //余额查询
    },
    methods:{
        // 余额查询
        balance(){
            this.$api.balance().then((res)=>{
                console.log(res)
                if(res.status == '0000'){
                    if(res.payload != ''){
                        res.payload.forEach((item,index)=>{
                            if(item.type == 'NORMAL'){
                                this.Mywallet = item.balance
                            }
                        })
                    }
                }
            })
        },


        // 账户明细
        AccountDetails(){
            this.$router.push({ name: "AccountDetails" });
        },
        // 余额提现
        balanceOfwithdrawal(){
            this.$router.push({ name: "balanceOfwithdrawal" });
        },
        // 银行卡管理
        bank_administration(){
            this.$router.push({ name: "bank_administration" });
        }
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }
    .c_iboade{
        width: 100%;
        height: 104px;
        background: #3288FF;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .mannys_big{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: bold;
        font-size: 30px;
        letter-spacing: 0px;
    }

    .mannys_miao{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
        margin-top: 12px;
    }

    .kabao{
        width: 100%;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F2F2F2;
        background: #fff;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .zuobian{
        display: flex;
        align-items: center;
    }
    .zuobian>img{
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }
    .zuobian>.tit{
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .youbian{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
    }
    .youbian>img{
        width: 100%;
        height: 100%;
    }
</style>